<html lang="zh-CN">
<head>
	<title>{$name}</title>
	<meta charset="UTF-8">
	<meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
	<if condition="$mallHue.mallHue eq '1'">
		<link href="{$Think.config.RESOURCEURL}wx_assets/css/product/product_order_success_blue.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
		<else/>
		<link href="{$Think.config.RESOURCEURL}wx_assets/css/product/product_order_success.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
	</if>
	<link rel="stylesheet" href="{$Think.config.RESOURCEURL}wx_assets/css/iconfont/font_tuan.css{$Think.config.RESOURCE_VER}">
	<script src="http://sdk.talkingdata.com/app/h5/v1?appid={$TDAppid}&vn=v1&vc=v1"></script>
	<script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}"></script>
	<script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
	<script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
	<script src="{$Think.config.RESOURCEURL}wx_assets/js/product/timer.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
</head>
<style>
	body{background-color:#FFF;}
	.coupon{background-color:white;border-radius:15px;margin:10px}
	.coupon_top{
		height:115px;
		border-bottom:dotted 1px #F0EFED;
	}
	.coupon_top>.proImg{
		padding: 20px 10px;
		text-align: center;
		font-size: 0;
		height: 100%;
		box-sizing: border-box;
		width: 93px;
		vertical-align: top;
		float: left;
		display: -webkit-box;
		-webkit-box-align: center;
	}
	.coupon_top>.proImg>img{
		max-width:100%;
		max-height:100%;
	}
	.coupon_top>.proInfo{
		height: 100%;
		padding: 32px 0;
		box-sizing: border-box;
		overflow: hidden;
	}
	.coupon_top>.proInfo>.name{
		font-size: 16px;
		color: #4a4a4a;
		line-height: 21px;
		height: 41px;
		color:#333333;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.coupon_top>.proInfo>.price{
		color:#FFAA2B;
		font-size: 16px;
		line-height: 21px;
	}
	.coupon_middle{
		padding: 18px 0 18px 15px;
		position:relative;
		border-bottom:solid 1px #F0EFED;
		color:#9D9D9D;
		font-size:14px;
	}
	.coupon_middle>span{
		display:block;
		line-height: 18px;
	}
	.coupon_middle:before{
		content: "";
		height: 15px;
		width: 15px;
		display: block;
		background-color: #F0EFED;
		border-radius: 50%;
		position: absolute;
		top: 0;
		left:0;
		transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
	}
	.coupon_middle:after{
		content: "";
		height: 15px;
		width: 15px;
		display: block;
		background-color: #F0EFED;
		border-radius: 50%;
		position: absolute;
		top: 0;
		right:0;
		transform: translate(50%,-50%);
		-webkit-transform: translate(50%,-50%);
	}
	.coupon_bottom{
		padding:18px 15px;
		color:#9D9D9D;
		font-size:14px;
		line-height:33px;
	}
	.coupon_bottom dt{
		float:left;
		padding-right: 10px;
		vertical-align: top;
		top: 2px;
		position: relative;
	}
	.coupon_bottom dd{
		position:relative;
		overflow:hidden;
	}
	.coupon_bottom dd span{
		display: inline-block;
		vertical-align: top;
		font-size: 22px;
	}
	.coupon_bottom dd span.notClaim{
		color:#333333;
	}
	.coupon_bottom dd img{
		width:30px;
		height:28px;
		position:absolute;
		right:10px;
		top: 50%;
		transform: translate(0,-50%);
		-webkit-transform: translate(0,-50%);
	}
	.virtualInfo{
		background-color:white;
		padding:10px;
		font-size:16px;
		margin:10px 0;
		line-height:26px;
	}
	.virtualInfo dt{
		color:#F27407;
	}
	.virtualInfo dd{
		color:#7C7B7B;
	}
	.main {
		font-size: 14px;
	}
	.main .info {
		padding: 16px 0;
	}
	.main a {
		color: #f85395;
	}
	.main .image {
		position: relative;
	}
	.main .image .money {
		position: absolute;
    left: -6px;
    top: 14px;
    text-align: center;
    width: 100%;
    font-size: 24px;
    color: #fff;
	}
	.main .image .money span{
    font-size: 14px;
	}
</style>
<body>
	<!-- 充值卡 -->
	<div class="container">
		<div class="top">
			<div class="centerDiv">
				<div class="rightIcon">&#xe604;</div>
				<div class="paySuccess">
					<span>充值成功!</span>
				</div>
			</div>
		</div>

		<div class="main">
			<div class="image">
				<img src="{$Think.config.RESOURCEURL}wx_assets/images/product/success_2.png{$Think.config.RESOURCE_VER}">
				<div class="money">{$sumMoney}<span>元</span></div>
			</div>
			<div class="info">您已经成功充值{$sumMoney}元！</div>
			<a href="{$Think.config.SERVER_HOST}call.html?customerId={$customerId}&module=purse&method=index">查看余额>></a>
		</div>


		<div class="bottom">
			<if condition="$browser eq '1'">
			<div><a href="{$Think.config.SERVER_HOST}call.html?customerId={$customerId}&module=product&method=getOrder&params=%7B%22tplid%22:1,%22type%22:%22buy,point%22%7D">查看订单</a></div>
			<div><a href="{$mall.storeurl}">返回首页</a></div>
				<else/>
				<div style="float:inherit;margin:auto"><a href="{$mall.storeurl}">返回首页</a></div>
			</if>
		</div>
	</div>

<script>
	function onDetail(id) {
		var basePath = 'call.html?customerId={$customerId}';
		location.href = basePath + '&module=product&method=getProduct&params={"id":' + id + '}';
	}
</script>
<script>
	wx_share.init({
		"pkg":{
			"appId": '{$pkg.appId}',
			"timestamp": '{$pkg.timestamp}',
			"nonceStr": '{$pkg.nonceStr}',
			"signature": '{$pkg.signature}'
		},
		hide:1
	});
</script>
</body>
</html>
